<template>
	<view>
		<view class="j-page">

			<!-- <view class="j-title-0">班主任工作满意度调查</view>
			<view class="j-title-0">（学生问卷）</view> -->
			<view class="j-message-1">亲爱的同学：</view>
			<view class="j-message-2">
				你好！为了提升我校的教育管理水平，更好地了解班主任的工作情况，特开展此次问卷调查。你的反馈对我们非常重要，请根据实际情况客观填写。问卷采用匿名形式，不会泄露你的个人信息，请放心作答。感谢你的支持与配合！
			</view>

			<view v-if="!state.data.id || state.redo">
				<view class="j-title-1">一、基本信息：</view>
				<view class="j-title-2" @click="toSelectClass">
					1. 你的班级是：<text
						:style="{color:state.data['item_1_1'] ? 'green' : 'red'}">{{state.data['item_1_1'] || '点击选择'}}</text>
				</view>
				<view class="j-title-1">二、工作态度：</view>
				<view class="j-title-2">1. 班主任对待工作的认真程度如何？</view>
				<view class="j-item j-item-1" @click="setItemValue('item_2_1','A')" :style="getItemStyle('item_2_1','A')">A.
					非常认真，总是全力以赴，关注每个细节</view>
				<view class="j-item j-item-2" @click="setItemValue('item_2_1','B')" :style="getItemStyle('item_2_1','B')">B.
					比较认真，能较好地完成各项任务</view>
				<view class="j-item j-item-3" @click="setItemValue('item_2_1','C')" :style="getItemStyle('item_2_1','C')">C.
					一般，基本能完成工作，但不够积极主动</view>
				<view class="j-item j-item-4" @click="setItemValue('item_2_1','D')" :style="getItemStyle('item_2_1','D')">D.
					不太认真，经常敷衍了事</view>
				<view class="j-title-2">2. 班主任是否经常主动与你交流沟通？</view>
				<view class="j-item j-item-1" @click="setItemValue('item_2_2','A')" :style="getItemStyle('item_2_2','A')">A.
					总是，经常主动找我聊天，关心我的学习和生活</view>
				<view class="j-item j-item-2" @click="setItemValue('item_2_2','B')" :style="getItemStyle('item_2_2','B')">B.
					经常，隔一段时间就会和我交流一次</view>
				<view class="j-item j-item-3" @click="setItemValue('item_2_2','C')" :style="getItemStyle('item_2_2','C')">C.
					偶尔，只有在我出现问题或者有特殊情况时才会找我</view>
				<view class="j-item j-item-4" @click="setItemValue('item_2_2','D')" :style="getItemStyle('item_2_2','D')">D.
					从不，几乎没有主动和我交流过</view>
				<view class="j-title-1">三、班级管理：</view>
				<view class="j-title-2">1. 你对班主任制定的班级规章制度是否满意？</view>
				<view class="j-item j-item-1" @click="setItemValue('item_3_1','A')" :style="getItemStyle('item_3_1','A')">A.
					非常满意，制度合理完善，能有效维护班级秩序</view>
				<view class="j-item j-item-2" @click="setItemValue('item_3_1','B')" :style="getItemStyle('item_3_1','B')">B.
					比较满意，制度基本符合班级情况，能起到一定的管理作用</view>
				<view class="j-item j-item-3" @click="setItemValue('item_3_1','C')" :style="getItemStyle('item_3_1','C')">C.
					一般，制度存在一些问题，但不影响班级管理</view>
				<view class="j-item j-item-4" @click="setItemValue('item_3_1','D')" :style="getItemStyle('item_3_1','D')">D.
					不满意，制度不合理，执行起来很困难</view>
				<view class="j-title-2">2. 对于班级中的违纪行为，班主任的处理方式你觉得：</view>
				<view class="j-item j-item-1" @click="setItemValue('item_3_2','A')" :style="getItemStyle('item_3_2','A')">A.
					非常恰当，处理公正、及时，能让人心服口服</view>
				<view class="j-item j-item-2" @click="setItemValue('item_3_2','B')" :style="getItemStyle('item_3_2','B')">B.
					比较恰当，处理方式较为合理，能有效解决问题</view>
				<view class="j-item j-item-3" @click="setItemValue('item_3_2','C')" :style="getItemStyle('item_3_2','C')">C.
					一般，处理方式没有太大问题，但效果不太理想</view>
				<view class="j-item j-item-4" @click="setItemValue('item_3_2','D')" :style="getItemStyle('item_3_2','D')">D.
					不恰当，处理方式简单粗暴，不能从根本上解决问题</view>
				<view class="j-title-1">四、学业指导：</view>
				<view class="j-title-2">1. 班主任在你的专业学习方面提供的指导和帮助：</view>
				<view class="j-item j-item-1" @click="setItemValue('item_4_1','A')" :style="getItemStyle('item_4_1','A')">A.
					非常有帮助，经常给予专业学习建议，引导我明确学习目标</view>
				<view class="j-item j-item-2" @click="setItemValue('item_4_1','B')" :style="getItemStyle('item_4_1','B')">B.
					比较有帮助，能解答一些学习上的疑问，提供一些学习资源</view>
				<view class="j-item j-item-3" @click="setItemValue('item_4_1','C')" :style="getItemStyle('item_4_1','C')">C.
					一般，偶尔会提到学习方面的事情，但帮助不大</view>
				<view class="j-item j-item-4" @click="setItemValue('item_4_1','D')" :style="getItemStyle('item_4_1','D')">D.
					几乎没有帮助，很少关注我的专业学习情况</view>
				<view class="j-title-2">2. 班主任是否关心你的职业规划和未来发展？</view>
				<view class="j-item j-item-1" @click="setItemValue('item_4_2','A')" :style="getItemStyle('item_4_2','A')">A.
					非常关心，经常与我探讨职业规划，提供相关信息和建议</view>
				<view class="j-item j-item-2" @click="setItemValue('item_4_2','B')" :style="getItemStyle('item_4_2','B')">B.
					比较关心，询问过我的职业想法，并给予一定的指导</view>
				<view class="j-item j-item-3" @click="setItemValue('item_4_2','C')" :style="getItemStyle('item_4_2','C')">C.
					一般，只是简单提及过，没有深入交流</view>
				<view class="j-item j-item-4" @click="setItemValue('item_4_2','D')" :style="getItemStyle('item_4_2','D')">D.
					不关心，从未过问过我的职业规划和未来发展</view>
				<view class="j-title-1">五、沟通能力：</view>
				<view class="j-title-2">1. 班主任与你沟通时，是否能够耐心倾听你的想法和意见？</view>
				<view class="j-item j-item-1" @click="setItemValue('item_5_1','A')" :style="getItemStyle('item_5_1','A')">A.
					总是，非常耐心，认真倾听并给予积极回应</view>
				<view class="j-item j-item-2" @click="setItemValue('item_5_1','B')" :style="getItemStyle('item_5_1','B')">B.
					经常，大部分时候能耐心倾听，但有时会打断</view>
				<view class="j-item j-item-3" @click="setItemValue('item_5_1','C')" :style="getItemStyle('item_5_1','C')">C.
					偶尔，只有在心情好或者时间充裕时才会听我说话</view>
				<view class="j-item j-item-4" @click="setItemValue('item_5_1','D')" :style="getItemStyle('item_5_1','D')">D.
					从不，根本不愿意听我表达自己的想法</view>
				<view class="j-title-2">2. 你觉得班主任与家长的沟通情况如何？</view>
				<view class="j-item j-item-1" @click="setItemValue('item_5_2','A')" :style="getItemStyle('item_5_2','A')">A.
					非常好，经常与家长保持联系，及时反馈我的在校情况</view>
				<view class="j-item j-item-2" @click="setItemValue('item_5_2','B')" :style="getItemStyle('item_5_2','B')">B.
					比较好，定期与家长沟通，让家长了解我的学习和生活</view>
				<view class="j-item j-item-3" @click="setItemValue('item_5_2','C')" :style="getItemStyle('item_5_2','C')">C.
					一般，偶尔与家长沟通，沟通内容也比较简单</view>
				<view class="j-item j-item-4" @click="setItemValue('item_5_2','D')" :style="getItemStyle('item_5_2','D')">D.
					不好，很少与家长沟通，家长对我的在校情况了解甚少</view>
				<view class="j-title-1">六、总体评价：</view>
				<view class="j-title-2">1. 你对现任班主任的总体满意度是：</view>
				<view class="j-item j-item-1" @click="setItemValue('item_6_1','A')" :style="getItemStyle('item_6_1','A')">A.
					非常满意
				</view>
				<view class="j-item j-item-2" @click="setItemValue('item_6_1','B')" :style="getItemStyle('item_6_1','B')">B.
					比较满意
				</view>
				<view class="j-item j-item-3" @click="setItemValue('item_6_1','C')" :style="getItemStyle('item_6_1','C')">C. 一般
				</view>
				<view class="j-item j-item-4" @click="setItemValue('item_6_1','D')" :style="getItemStyle('item_6_1','D')">D. 不满意
				</view>
				<view class="j-title-2">2. 你认为班主任在哪些方面还需要改进？（可多选）</view>
				<view class="j-item j-item-1" @click="setItemValue2('item_6_2','A')" :style="getItemStyle2('item_6_2','A')">
					A.工作态度
				</view>
				<view class="j-item j-item-2" @click="setItemValue2('item_6_2','B')" :style="getItemStyle2('item_6_2','B')">B.
					班级管理方式
				</view>
				<view class="j-item j-item-3" @click="setItemValue2('item_6_2','C')" :style="getItemStyle2('item_6_2','C')">C.
					学业指导能力
				</view>
				<view class="j-item j-item-4" @click="setItemValue2('item_6_2','D')" :style="getItemStyle2('item_6_2','D')">D.
					沟通能力
				</view>
				<view class="j-item j-item-4" :style="getItemStyle3('item_6_3')">E. 其他（清注明）
					<view style="padding: 0 15px; padding-left: 25px;">
						<uni-easyinput type="textarea" autoHeight v-model="state.data.item_6_3"
							placeholder="请输入(可选输入)"></uni-easyinput>
					</view>
				</view>

				<view style="text-indent: 1em;">
					再次感谢你抽出宝贵的时间填写这份问卷！如果你还有其他任何想法或建议，欢迎随时与我们联系。
				</view>
				<view style="text-align: center; color:red;">{{check()}}</view>
				<button type="primary" @click="handleCommit" :disabled="check()!==''">提交</button>
			</view>

			<view v-else>
				<p style="margin-top: 30px; text-align: center; font-size: 24px; color: green;">感谢您的参与</p>
				<p style="margin-top: 15px; text-align: center; font-size: 24px; color: green;">您的满意度调查已提交</p>

				<view style="margin-top: 30px;">
					<button type="warn" @click="handleRedo()">重新提交</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		unref,
		onMounted,
	} from 'vue';
	
	import config from '@/jk/config.js'

	onMounted(() => {
		state.data.id = uni.getStorageSync('questionnaire_student_id') || '';
	})
	const state = reactive({
		redo: false,

		data: {
			id: '',
			item_1_1: '',
			item_2_1: '',
			item_2_2: '',
			item_3_1: '',
			item_3_2: '',
			item_4_1: '',
			item_4_2: '',
			item_5_1: '',
			item_5_2: '',
			item_6_1: '',
			item_6_2: '',
			item_6_3: ''
		},
	})
	const fn = (k, v) => {
		return `第${k}大项的第${v}小项还没选择`;
	}
	const validateMessage = {
		item_1_1: '请选择所在班级',
		item_2_1: fn('二', 1),
		item_2_2: fn('二', 2),
		item_3_1: fn('三', 1),
		item_3_2: fn('三', 2),
		item_4_1: fn('四', 1),
		item_4_2: fn('四', 2),
		item_5_1: fn('五', 1),
		item_5_2: fn('五', 2),
		item_6_1: fn('六', 1),
	}

	const setItemValue = (key, value) => {
		state.data[key] = value;
	}

	// 多选
	const setItemValue2 = (key, value) => {
		if (state.data[key].indexOf(value) === -1) {
			state.data[key] = [...state.data[key].split(''), value].sort((a, b) => a > b ? 1 : -1).join('')
		} else {
			state.data[key] = state.data[key].split('').filter(r => r !== value).join('');
		}
	}

	const getItemStyle = (key, value) => {
		if (state.data[key] === value) {
			return {
				background: 'green',
				color: 'white',
			}
		} else {
			return {}
		}
	}

	const getItemStyle2 = (key, value) => {
		if (state.data[key].indexOf(value) > -1) {
			return {
				background: 'green',
				color: 'white',
			}
		} else {
			return {}
		}
	}

	const getItemStyle3 = (key) => {
		if ((state.data[key] || '').trim().length > 0) {
			return {
				background: 'green',
				color: 'white',
			}
		} else {
			return {}
		}
	}

	const item_list = [
		'2101','2201','2218','2219','2220','2222',
		'2301', '2302', '2303', '2304', '2305', '2306', '2307', '2308', '2309', '2310',
		'2311', '2312', '2313', '2314', '2315', '2316', '2318', '2319', '2320',
		'2321', '2322',
		'2401', '2402', '2403', '2404', '2405', '2406', '2407', '2408', '2409', '2410',
		'2411', '2412', '2413', '2414', '2415', '2416', '2417', '2418',
	]

	const toSelectClass = () => {
		uni.showActionSheet({
			itemList: item_list,
			success: function(res) {
				console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
				console.log(item_list[res.tapIndex])
				setItemValue('item_1_1', item_list[res.tapIndex])
			},
			fail: function(res) {
				console.log(res.errMsg);
			}
		});
	}

	const check = () => {
		for (let key in validateMessage) {
			if (!state.data[key]) {
				console.log(key, validateMessage[key])
				return validateMessage[key];
			}
		}

		return '';
	}

	const handleRedo = () => {
		state.redo = true;
	}

	const handleCommit = () => {
		const err = check();
		if (err) {
			uni.showToast({
				icon: 'error',
				title: err
			})
			console.log({
				err
			})

			return;
		}


		uni.showModal({
			title: '请确认',
			content: '您确认现在提交吗？',
			success: function(res) {
				if (res.confirm) {
					console.log('用户点击确定');

					uni.showLoading({
						title: '正在提交'
					})

					state.data.id = uni.getStorageSync('questionnaire_student_id') || '';

					uni.request({
						method: 'POST',
						url: `${config.rootUrl}/wuxixz/questionnaire/student/commit`, //仅为示例，并非真实接口地址。
						data: {
							...state.data
						},
						header: {},
						success: (res) => {
							res = res.data;

							console.log(44, res)

							if (res.code === 0) {

								uni.setStorageSync("questionnaire_student_id", res.result);

								uni.showModal({
									title: '信息',
									content: '提交成功',
									showCancel: false,
									success() {
										state.redo = false;
										state.data.id = res.result;
									}
								})
							} else {
								uni.showModal({
									title: '错误',
									content: `提交失败：${res.message}`,
									showCancel: false,
								})
							}

						},
						fail: (err) => {
							console.log(err);
							uni.showModal({
								title: '错误',
								content: `提交失败：${err.message}`,
								showCancel: false,
							})
						},
						complete() {
							uni.hideLoading();
						}
					});

				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});

		// uni.showModal({
		// 	title: '请确认',
		// 	content: '您确认提交吗？',
		// 	showCancel: true,
		// 	success({
		// 		confirm
		// 	}) {
		// 		if (confirm) {
		// 			console.log('confirm', state.data);
		// 		} else {
		// 			console.log('cancel')
		// 		}
		// 	}
		// })

		console.log(100, unref(state.data))
	}
</script>

<style>
	* {
		font-size: 20px;
	}

	view {
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.j-page {
		padding: 0 20px;
	}

	.j-title-0 {
		text-align: center;
	}

	.j-message-1 {}

	.j-message-2 {
		text-indent: 2em;
	}

	.j-title-1 {
		font-weight: 700;
	}

	.j-title-2 {
		font-weight: 700;
		text-indent: 1em;
	}

	.j-item {
		padding: 5px 0;
		text-indent: 1em;
	}
</style>